﻿<template>
  <div class="fwb_big">
    <!--<header ref="header">
      <img src="../../static/img/goback_header_left_act.png"
           class="img_header" v-on:click="goback" />
             参数信息
      <div class="my_match">
        我的参赛
      </div>
    </header>-->
    <div class="header_img_bg">
      <img src="../../static/img/goback_header_left_act.png"
           class="img_header" v-on:click="goback" />
    </div>



    <div class="fwb_header_img" v-if="data_c_d" ref="img">
      <div class="cover_header_img" ref="cover_header_img" v-bind:style="{ opacity: optical }"></div>
      <img v-bind:src="data_c.cover|new_img_show_base" style="height:100%;width:100%;display:block" ref="real_img"/>
    </div>

    <div class="cover_bottom" ref="cover_bottom">

      <div class="hader_title">
        <!--span>&nbsp;详&nbsp;&nbsp;情&nbsp;</span>-->
        <p class="xiang">
          <span class="s_xiang">详</span>
        </p>
        <p class="qing">
          <span class="s_qing"> 情</span>
        </p>
      </div>
      <div class="header_line"></div>
      <div class="fwen_b" v-html="data_c.workcontent" ref="fwen_b_f">

      </div>
    </div>

  </div>

</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  var qs = require('qs');
  import { Toast, Indicator } from 'mint-ui';
  import "../filter/filter.js";
  import common from "../common/common.js";
  //import Header_other from "./header_other/Header_other.vue";
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      data_c: "",
      data_c_d: false,
      optical:0,
      base_url:""
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {
    let base_url ="";
    if(sessionStorage.getItem("is_app") == true ||sessionStorage.getItem("is_app") == "true"){
      base_url = common.get_base_url();
      console.log("base_url");
      console.log(base_url);
      this.base_url = base_url
    }
    Indicator.open();
    let roll_id = sessionStorage.getItem("roll_id");
    let body = document.body
    this.$http.get(this.base_url+'/yizhiweimen/api/user/activity/getInformation?id=' + roll_id,
      qs.stringify(
        {
          "id": roll_id,
        })
      )
      .catch((thrown) => {
        Indicator.close();
        console.log(thrown);
      }).then((e) => {
        if (e.data == undefined) {
          this.data_c = "没有数据"
        } else {
          this.data_c = e.data;
        }

        this.data_c_d = true;
        Indicator.close();
        //console.log(e.data);
        this.$nextTick(() => {
          let opt = 0.1

          //let header = window.getComputedStyle(this.$refs.header, null).height;
          let img = window.getComputedStyle(this.$refs.img, null).height;

          this.$refs.cover_bottom.style.top =  + parseInt(img.replace("px", "")) + "px";

          let pre_change = 1 / this.$refs.cover_bottom.style.top.replace("px","");
          document.body.onscroll = (e) => {


          }

          let c_b = this.$refs.cover_bottom;
          c_b.addEventListener("touchstart", (e) => {

            let o_t = e.touches[0].clientY;
            //c_b.addEventListener("touchmove",(e) => {
            //  console.log("touch_move_____________")
            //  console.log(e.target)
            //})
            c_b.addEventListener("touchmove", (e) => {

              if (o_t > e.touches[0].clientY) {//向上
                console.log("向上")
                if (opt < this.$refs.cover_bottom.style.top ) return
               //opt -= 10;
               //this.$refs.real_img.style.transform = 'translate3d(' + 0 + 'px,' + opt+'px, 0px)'
               // this.optical= opt;
              } else {
                console.log("向下")
                if (opt > this.$refs.cover_bottom.style.top ) return
                //opt += 10;
                //this.$refs.real_img.style.transform = 'translate3d(' + 0 + 'px,'+opt+'px, 0px)'
               // this.optical = opt;
              }

            })
          })

        })
      })


  },
  methods: {
    goback: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/activity", router: this.$router
        });
    }
  },
  components: {

  }
}
</script>
<style scoped>
  .header_img_bg{
    width:14vw;
    border-radius:50%;
    height:14vw;
    position:absolute;
    top:10vw;
    left:5vw;
    background-color:#5e5650;
    z-index:1000;
  }
  .hader_title p .s_qing {
    padding-left: 2vw;
    padding-right: 8vw;
    /* margin-left: 7vw; */
    padding-bottom: 2vw;
    border-top: 0px;
    margin-left: 8vw;
  }
  .hader_title p .s_xiang {
    padding-left: 2vw;
    padding-right: 8vw;
    /* margin-left: 7vw; */
    padding-bottom: 1vw;
    padding-top:2vw;
    border-bottom: 0px;
    margin-left:8vw;
  }
  .xiang span{
    border-right:0;
  }
  .qing span{
    border-left:0;
  }
  .header_line {
    height: 4px;
    width: 95%;
    background-color: #6c3104;
    margin: 2vw auto 6vw;
  }
  html, body {
    background-color: #fff;
  }
  .hader_title p span {
    border: 1px solid #6c3104;
    color: #6c3104;
    font-weight:bold;
  }
  .hader_title p {
    text-align:left;
    padding-bottom: 2vw;
    color:#fff;

    /*background-color: #6c3104*/
  }
  .hader_title {
    padding-top: 8vw;
    padding-bottom: 1vw;
    font-size: 8vw;
    text-align: center;
    line-height: 1.5;
  }
  .cover_bottom {
    width: 100%;
    position: absolute;
    z-index: 100;
    background-color: #ececec;
    box-shadow: 2px 0 10px 4px #2626269c;
  }
  header {
    height: 5.8vw;
    box-shadow: 1px 0 10px 4px #3836366e;
  }
  .add_act_val {
    position: absolute;
    top: 50%;
    right: 2vw;
    height: 10vw;
    line-height: 10vw;
    font-size: 4vw;
    text-align: center;
    border-radius: 2vw;
    background-color: #e85454;
    color: #fff;
    padding-left: 1vw;
    padding-right: 1vw;
    transform: translateY(-50%);
  }
  .act_header_img {
    position: absolute;
    left: 8vw;
    top: 50%;
    border-radius: 2vw;
    width: 9vw;
    height: 9vw;
    border: 1px solid #9f5c2f;
    transform: translateY(-50%);
  }

  .act_header {
   height:5.8vw;
    line-height: 12vw;
    font-size: 5.3vw;
    text-align: center;
    color: #9f5c2f;
    background-color: #fff;
    border-radius: 4vw 4vw 0 0;
  }
  /*header s*/
  header {
    width: 100%;
    z-index: 1000;
    position: fixed;
    height: 11.7vw;
    line-height:11.7vw;
    background-color: #9f5c2f;
    font-size: 18px;
    text-align: center;
    color: #fff;
  }

  .img_header {
    position: absolute;
    top: 50%;
    left: 4.2vw;
    width: 5.4vw;
    transform: translateY(-50%);
  }

  .my_match {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.6vw;
    /*width:16.2vw;*/
    padding: 1vw;
    height: 17.5px;
    line-height: 17.5px;
    font-size: 13px;
    border-radius: 2vw;
    border: 1px solid #fff;
  }
  /*header e*/
  /*fwb_header_img*/
  .fwb_header_img{
    height:80vw;
    width:100%;
    position:fixed;
  }
  .cover_header_img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #5e5650;
    opacity: 0;
    width: 100%;
    height: 100%;
  }

  /*fwb_header_img*/
</style>
